<!-- 评论列表 -->
<template>

<div class="container">
        <!-- 搜索框独立行 -->
        <div class="search-container">
            <el-input v-model="search" size="small" placeholder="请输入订单ID搜索" style="width: 200px;" clearable>
                <template #prefix>
                    <el-icon>
                        <Search />
                    </el-icon>
                </template>
            </el-input>

        </div>

        <!-- 表格另起一行 -->
        <el-scrollbar>
            <el-table :data="filterTableData" style="width: 100%" height="700">
                <el-table-column prop="commentId" label="评论ID" show-overflow-tooltip>
                    <template #default="{ row }">
                        <span>{{ row.commentId }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="orderId" label="订单ID" show-overflow-tooltip>
                    <template #default="{ row }">
                        <span>{{ row.orderId }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="commentCategory" label="评论类别" show-overflow-tooltip>
                    <template #default="{ row }">
                        <span>{{ row.commentCategory }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="commentContent" label="评论内容" show-overflow-tooltip>
                    <template #default="{ row }">
                        <span>{{ row.commentContent }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="isDelete" label="用户是否已删除" show-overflow-tooltip>
                    <template #default="{ row }">
                        <span>{{ row.isDelete === '0' ? '不删除' : '删除' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template #default="{ row }">
                        <el-button type="danger" @click="deleteRow(row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 添加分页组件 -->
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[6, 12, 24, 48]"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next"
                class="pagination"
            />
        </el-scrollbar>
    </div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from "axios";

const comments = ref([]);
const originalComments = ref([]);
const deleteRow = async (row) => {
    try {
        // 添加确认对话框
        await ElMessageBox.confirm(
            '确定要删除该评论吗？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )

        const response = await axios.post('/deleteComment',row.commentId,
            {
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: sessionStorage.getItem('Authorization')
                }
            }
        )
        if (response.data.status === 200) {
            ElMessage.success(response.data.message);
            comments.value = comments.value.filter(comment => comment.commentId !== row.commentId);
        } else {
            ElMessage.error(response.data.message || '删除失败');
        }
    } catch (err) {
        if (err?.message === 'cancel') {
            return;
        }
        console.error('删除评论出错:', err);
        ElMessage.error('删除失败');
    }
};

// 添加分页相关的响应式变量
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 修改获取评论列表的方法
const fetchComments = async () => {
    try {
        const response = await axios.get("/getComments", {
            params: {
                current: currentPage.value,
                size: pageSize.value
            },
            headers: {
                Authorization: sessionStorage.getItem("Authorization"),
            },
        });

        // 正确访问分页数据
        const commentsData = response.data.data;

        if (commentsData && commentsData.records) {
            comments.value = commentsData.records.map(comment => ({
                commentId: comment.commentId || '',
                orderId: comment.orderId || '',
                commentCategory: comment.commentCategory || '',
                commentContent: comment.commentContent || '',
                isDelete: comment.isDelete || '0',
                isEdit: false
            }));

            total.value = commentsData.total;
            originalComments.value = JSON.parse(JSON.stringify(comments.value));
        } else {
            comments.value = [];
            originalComments.value = [];
            total.value = 0;
        }

    } catch (error) {
        console.error('获取评论列表失败:', error);
        comments.value = [];
        originalComments.value = [];
        total.value = 0;
    }
};

// 处理页码改变
const handleCurrentChange = (val) => {
    currentPage.value = val;
    fetchComments();
}

// 处理每页显示数量改变
const handleSizeChange = (val) => {
    pageSize.value = val;
    currentPage.value = 1; // 重置为第一页
    fetchComments();
}

// 修改 onMounted
onMounted(() => {
    fetchComments();
});

const search = ref("");
const filterTableData = computed(() =>
    comments.value.filter(
        (comment) =>
            !search.value ||
            comment.orderId.toString().includes(search.value)
    )
);
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.search-container {
    width: 100%;
    padding: 20px;
    background-color: #fff;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 20px;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 添加分页组件的样式 */
.pagination {
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
}
</style>